<template>
    <div ref="box" @scroll="onScroll" route class="article-list">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <van-list  v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell @click="$router.push(`/article/${item.art_id}`)" v-for="item in list" :key="item.art_id" :title="item.title">
        <template #title>
          <div class="title">{{ item.title }}</div>
          <!-- 图片 -->
          <van-grid :border="false" :column-num="item.cover.type">
            <van-grid-item v-for="(pic,index) in item.cover.images" :key="index">
              <van-image cover width="100%" height="100%" :src="pic" />
            </van-grid-item>
          </van-grid>
          <div class="pic-box">
            <span>{{item.aut_name}}</span>
            <span>{{item.comm_count}}评论</span>
            <span>{{$relvTime(item.pubdate)}}</span>
            <van-icon style="float: right" name="cross" />
          </div>
        </template>
      </van-cell>
    </van-list>
  </van-pull-refresh>
  </div>

</template>

<script>
import { articleListAPI } from '@/api/article'
export default {
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: Date.now(),
      isLoading: false,
      scrollTop: 0
    }
  },
  props: {
    channel_id: {
      required: true,
      type: Number,
      Array

    }
  },
  activated () {
    this.$refs.box.scrollTop = this.scrollTop
  },
  methods: {
    onScroll () {
      this.scrollTop = this.$refs.box.scrollTop
    },
    async onLoad () {
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: this.timestamp
      })
      this.timestamp = res.data.pre_timestamp
      this.list.push(...res.data.results)
      this.loading = false
      if (this.timestamp == null) {
        this.finished = true
      }
    },
    async onRefresh () {
      this.finished = false
      const res = await articleListAPI({
        channel_id: this.channel_id,
        timestamp: Date.now()
      })
      this.list = res.data.results
      this.timestamp = res.data.pre_timestamp
      this.isLoading = false
    }

  }
}
</script>

<style lang="less" scoped>
.article-list {
  position: fixed;
  width: 100%;
  top: 90px;
  bottom: 50px;
  overflow: auto;
}
.pic-box{
  span{
    color: gray;
  font-size: 12px;
  &:nth-of-type(2){
    margin: 0 15px;
  }
  }

}
</style>
